<head>
    <style>
        .background {
            background-color: #1E90FF
        }

        .config {
            float: left;
            width: 200px;
            text-align: center;
            white-space: nowrap;
            height: 50px;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">模组温度配置</h4>
</div>
<div id="defaultForm" method="post" class="form-horizontal">
    <div class="modal-body">
        <input type="hidden" th:value="${group_id}" name="group_id" id="group_id">
        <div class="form-group">
            <div class="form-group col-lg-6" style="margin-right: 10px; height: 400px">
                <fieldset id="package_monitor">
                    <legend>单体与温度测点</legend>
                    <fieldset class="col-lg-5" id="package_monitor1"
                              style="margin:auto 20px; height: 350px;float: left;">
                        <legend>单体列表</legend>
                        <ul class="list-group" style="overflow-y:scroll;height: 300px;">
                            <li class="list-group-item background" th:each="e:${equipmentManageList}">
                                <input type="checkbox" name="battery" th:value="${e.id}" th:id="'equip_'+${e.id}"/>
                                <label th:text="${e.name}" th:for="'equip_'+${e.id}"></label>
                            </li>
                        </ul>
                    </fieldset>
                    <fieldset class="col-lg-5" id="package_monitor2"
                              style="margin:auto 20px ; height: 350px;float: left;">
                        <legend>温度测点表</legend>
                        <ul class="list-group ">
                            <li class="list-group-item background" th:each="n:${parameterInfoList}">
                                <input type="checkbox" name="tem" th:value="${n.id}" th:id="'param_'+${n.id}"/>
                                <label th:text="${n.name}" th:for="'param_'+${n.id}"></label>
                            </li>
                        </ul>
                    </fieldset>
                </fieldset>
            </div>
            <div class="form-group col-lg-1" style=" display: block;margin: 150px auto">
                <div>
                    <button type="button" class="btn btn-default btn-lg" id="button1" data-toggle="tooltip"
                            title="添加单体和温度的配置关系">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </button>
                </div>
                <div style="margin-top:50px">
                    <button type="button" class="btn btn-default btn-lg" id="button2" data-toggle="tooltip"
                            title="删除单体和温度的配置关系">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
            <div class="form-group col-lg-5" style="margin-right: 10px; float:right;">
                <fieldset class="col-lg-12" id="package_monitor3" style="height: 400px;">
                    <legend>配置表</legend>
                    <ul class="list-group" style="margin: auto 20px;">
                        <li class="list-group-item config">对应单体</li>
                        <li class="list-group-item config">对应温度测点</li>
                    </ul>
                </fieldset>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="check_info(this)">保存</button>
    </div>
</div>
<script th:inline="javascript">

    var battery_arr = [];
    var tem_arr = [];
    var battery = [[${equipmentManageList}]];
    var tem = [[${parameterInfoList}]];
    var equipmentTemperatureConfList = [[${equipmentTemperatureConfList}]];
    var result = [];

    /**
     * 给电池单体checkbox绑定单击事件
     */
    function clickBattery() {
        $("input[name='battery']").change(function () {
            console.log("battery_arr首先进行的应该是放到数组里面去");
            if ($(this).prop("checked")) {
                // 获取当前的对象
                var index = getIndex(battery, $(this).val());
                var one = battery[index];
                battery_arr.push(one);//将选中的选项添加到数组中
            } else {
                var index = getIndex(battery_arr, $(this).val())//找到没有选中的选项在数组中的索引
                battery_arr.splice(index, 1);//在数组中删除该选项
            }
            console.log(battery_arr);
        })
    }

    /**
     * 给温度checkbox单击事件
     */
    function clickTem() {
        $("input[name='tem']").change(function () {
            console.log("tem_arr首先进行的应该是放到数组里面去");
            tem_arr.length = 0;
            if ($(this).prop("checked")) {
                // 获取当前的对象
                var index = getIndex(tem, $(this).val());
                var one = tem[index];
                tem_arr.push(one);//将选中的选项添加到数组中
                // 移除其他checkbox的选中
                $(this).parent().siblings().find('input:checkbox').prop('checked', false);
            }
            console.log(tem_arr);
        })
    }

    //这个函数用于获取指定值在数组中的索引
    function getIndex(arr, value) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].id == value) {
                return i
            }
        }
    }

    /**
     * 绑定移入按钮事件
     */
    $('#button1').click(function () {
        if (tem_arr.length == 0) {
            alert("请选择温度");
        }
        if (battery_arr.length == 0) {
            alert("请选择电池单体");
        }
        if (tem_arr.length > 0 && battery_arr.length > 0) {
            add();
        }
    })

    /**
     * 绑定移出按钮事件
     */
    $('#button2').click(function () {
        var obj = $("input[name='conf']");
        if ($("input[name='conf']:checked")) {
            var unChoose = new Array();
            $("input[name='conf']:not(:checked)").each(function () {    // 没有选中的全部放到数组里面去
                unChoose.push($(this).val());
            });
            $("input[name='conf']:checked").each(function () {  // 选中的全部移出
                $(this).parent().next().remove();
                $(this).parent().remove();
            });
            // 移出所有的选项重新添加
            $("#package_monitor1 ul").find("li").remove();
            $("#package_monitor2 ul").find("li").remove();
            if (unChoose.length > 0) { // 当有未选中的选项时
                for (x = 0; x < unChoose.length; x++) {
                    var value = unChoose[x].split(",");
                    // 1. 获取电池单体
                    for (i = 0; i < battery.length; i++) {
                        if (value[0].indexOf(battery[i].id) < 0) {    // 当id不存在于未选中的数组中时
                            var str =
                                '<li class="list-group-item background">\n' +
                                '    <input type="checkbox" name="battery" value="' + battery[i].id + '" id="equip_' + battery[i].id + '"/>\n' +
                                '    <label for="equip_' + battery[i].id + '">' + battery[i].name + '</label>\n' +
                                '</li>';
                            $("#package_monitor1 ul").append(str);
                        }
                    }
                    // 2. 获取温度
                    for (i = 0; i < tem.length; i++) {
                        if (value[1].indexOf(tem[i].id) < 0) {
                            var str =
                                '<li class="list-group-item background">\n' +
                                '    <input type="checkbox" name="tem" value="' + tem[i].id + '" id="param_' + tem[i].id + '"/>\n' +
                                '    <label for="param_' + tem[i].id + '">' + tem[i].name + '</label>\n' +
                                '</li>';
                            $("#package_monitor2 ul").append(str);
                        }
                    }
                }
            } else {    // 当全部都是已选中的情况
                for (i = 0; i < battery.length; i++) {
                    var str =
                        '<li class="list-group-item background">\n' +
                        '    <input type="checkbox" name="battery" value="' + battery[i].id + '" id="equip_' + battery[i].id + '"/>\n' +
                        '    <label for="equip_' + battery[i].id + '">' + battery[i].name + '</label>\n' +
                        '</li>';
                    $("#package_monitor1 ul").append(str);
                }
                for (i = 0; i < tem.length; i++) {
                    var str =
                        '<li class="list-group-item background">\n' +
                        '    <input type="checkbox" name="tem" value="' + tem[i].id + '" id="param_' + tem[i].id + '"/>\n' +
                        '    <label for="param_' + tem[i].id + '">' + tem[i].name + '</label>\n' +
                        '</li>';
                    $("#package_monitor2 ul").append(str);
                }
            }
            clickBattery();
            clickTem();
        } else {
            alert("请选择配置项")
        }
    });

    /**
     * 移入的方法
     */
    function add() {
        var temStr = "";
        var batStr = "";
        var idstr = "";
        // 1. 获取电池单体字符串
        for (i = 0; i < battery_arr.length; i++) {
            batStr += battery_arr[i].name + "|";
            idstr += battery_arr[i].id + "|";
            $("input[value='" + battery_arr[i].id + "']").parent().remove();
        }
        if (batStr.charAt("|")) {
            batStr = batStr.substring(0, batStr.lastIndexOf("|"));
            idstr = idstr.substring(0, idstr.lastIndexOf("|"));
            idstr += ",";
        }
        // 2. 获取温度字符串
        for (i = 0; i < tem_arr.length; i++) {
            temStr += tem_arr[i].name + "|";
            idstr += tem_arr[i].id + "|";
            $("input[value='" + tem_arr[i].id + "']").parent().remove();
        }
        if (temStr.charAt("|")) {
            temStr = temStr.substring(0, temStr.lastIndexOf("|"));
            idstr = idstr.substring(0, idstr.lastIndexOf("|"));
        }
        var str =
            '<li class="list-group-item config">\n' +
            '    <input type="checkbox" name="conf" value="' + idstr + '" id="conf_' + idstr + '"/>\n' +
            '    <label for="conf_' + idstr + '" title="' + batStr + '">' + batStr + '</label>\n' +
            '</li>' +
            '<li class="list-group-item config">\n' +
            '    <label title="' + temStr + '">' + temStr + '</label>\n' +
            '</li>';
        $("#package_monitor3 ul").append(str);
        tem_arr.length = 0;
        battery_arr.length = 0;
    }

    /**
     * 如果是修改的话要初始化一下
     */
    function initEdit() {
        // 数组里面没有元素直接返回
        if (equipmentTemperatureConfList == null || equipmentTemperatureConfList.length < 1) {
            return;
        }
        // 如果有的话就添加过去
        var tmp_id = "";
        $(equipmentTemperatureConfList).each(function (i, v) {
            if (tmp_id != v.parameterInfo.id) { //当温度不一样的时候就要添加温度
                if (tem_arr.length > 0){    //当数组里面已有元素的时候就压把上次的放进去清空数组
                    add();
                }
                tmp_id = v.parameterInfo.id;
                tem_arr.push(v.parameterInfo);
            }
            battery_arr.push(v.equipment);
            if (i == (equipmentTemperatureConfList.length - 1)){ // 防止最后一次没有添加进去的验证
                add();
            }
        });
    }

    $(function () {
        $("[data-toggle='tooltip']").tooltip();
        clickBattery();
        clickTem();
        initEdit();
    });

    /**
     * 提交按钮
     * @param button
     */
    function check_info(button) {
        var id = $("#group_id").val();
        $("input[name='conf']").each(function () {    // 没有选中的全部放到数组里面去
            var str = $(this).val();
            var info = str.split(",");
            var batterys = info[0];
            var tems = info[1];
            var battery_ids = batterys.split("|");
            var tem_ids = tems.split("|");
            for (i = 0; i < tem_ids.length; i++) {
                for (j = 0; j < battery_ids.length; j++) {
                    result.push({battery: battery_ids[j], tem: tem_ids[i]});
                }
            }
        });
        $.post(
            'temperature_save',
            {id: id, data: JSON.stringify(result)},
            function (back) {
                if (back.type == "success") {
                    $("#dataTable").bootstrapTable("selectPage", 1);
                    $(button).prev().get(0).click();
                }
                alert(back.message);
            }
        );
    }
</script>